<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='chrome=1'>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <meta name='mobile-web-app-capable' content='yes'>
    <meta name='apple-mobile-web-app-capable' content='yes'>

    <meta name='twitter:card' content='summary'>
    <meta name='twitter:title' content='WebXR Samples'>
    <meta name='twitter:description' content='Sample WebXR pages for testing and reference'>

    <link rel='icon' type='image/png' sizes='32x32' href='../favicon-32x32.png'>
    <link rel='icon' type='image/png' sizes='96x96' href='../favicon-96x96.png'>

    <link rel='stylesheet' href='../css/stylesheet.css'>
    <link rel='stylesheet' href='../css/pygment_trac.css'>

    <style>
      article {
        position: relative;
        padding: 0.5em;
        background-color: rgba(255, 255, 255, 0.90);
        margin-bottom: 1em;
        border-radius: 3px;
      }

      article h3 {
        font-size: 1.0em;
        margin-top: 0px;
        margin-bottom: 0px;
      }

      article h3::before {
        display: inline-block;
        content: attr(data-index) ' - ';
        font-weight: bold;
        white-space: nowrap;
        margin-right: 0.2em;
      }

      article h4 {
        position: absolute;
        right: 0.5em;
        top: 0.5em;
        margin-top: 0px;
        margin-bottom: 0px;
      }

      article p {
        margin: 0.5em;
      }

      article .links {
        margin-left: 0.5em;
        margin-right: 0.5em;
      }

      article a {
        display: inline-block;
      }

      article a:not(:first-child)::before {
        display: inline-block;
        content: '•';
        font-weight: bold;
        white-space: nowrap;
        margin-left: 0.5em;
        margin-right: 0.5em;
      }

      .github-link {
        font-size: 0.8em;
      }

      .wordmark img {
        width: 70%;
      }
    </style>

    <!--[if lt IE 9]>
    <script src='https://html5shiv.googlecode.com/svn/trunk/html5.js'></script>
    <![endif]-->
    <title>WebXR - Test Pages</title>
  </head>
  <body>

    <div class='container' id='container'>
      <header class='header'>
        <div id='nav'>
            <a href='../'>Samples</a>
            <a href='../layers-samples/'>Layers Samples</a>
            <a href='../webgpu/'>WebGPU Samples</a>
            <a href='../proposals/'>Proposals</a>
            <a href='./' class='selected'>Test Pages</a>
            <a href='../report/'>Report</a>
        </div>

        <h1>
          <a href='' class='wordmark'>
            <img src='../media/logo/webxr-logo.svg' alt='WebXR Logo'/>
          </a>
        </h1>
        <h2 class='tagline'>Test Pages</h2>
      </header>

      <main class='main' id='main'>
        <p>These pages are useful for testing various aspects of WebXR
           implementations, but aren't as well commented or straightforward as
           the sample pages.<br/>

        <script>
          let pages = [
            { title: 'Cube Sea', category: 'Cube Sea',
              path: 'cube-sea.html',
              description: 'All hail the cube sea! Not very interesting to look at, but it\'s fantastic for testing!' },

            { title: 'Pointer Painter', category: 'Input',
              path: 'pointer-painter.html',
              description: 'Leaves behind a trail of pointers and cursors on select events.' },

            { title: 'User Agent Prompts', category: 'User Agent Behavior',
              path: 'permission-request.html',
              description: 'Tests various prompts (PWA install, permission requests, notifications) from within XR.' },

            { title: 'Offscreen Canvas', category: 'Alternate WebGL Modes',
              path: 'offscreen-canvas.html',
              description: 'Tests use of an OffscreenCanvas with XR.' },

            { title: 'Sponza', category: 'Lots-o-Polys',
              path: 'sponza.html',
              description: 'Loads a larger scene than other samples for performance testing. (Warning: Can be slow on mobile devices!)' },

            { title: 'Composed Views', category: 'We Like Matrix Math',
              path: 'composed-views.html',
              description: 'Tests a scenario where views are composed from a combination of viewer and local-floor space.' },

            { title: 'Reference Space Invert', category: 'We Hate Matrix Math',
              path: 'ref-space-invert.html',
              description: 'Tests creating an offset reference space with the viewer pose, which should cancel out the pose and report the viewer at the origin.' },

            { title: 'Interrupted AR', category: 'Exceptions!',
              path: 'interrupted-ar.html',
              description: 'Tests what happens when an exception is thrown in promise resolve of an `immersive-ar` session request.' },

            { title: 'Sparse Frames', category: 'M_ss_ng Fr_m_s',
              path: 'sparse-frames.html',
              description: 'Tests what happens the framebuffer is not populated every frame.' },

            { title: 'WebGL 2.0 Multisampling', category: 'Artisinally crafted pixels',
              path: 'webgl2-multisample.html',
              description: 'Tests that multisample renderbuffers are usable with XRWebGLLayer.' },

            { title: 'Exit Button', category: 'Tasty Burritos',
              path: 'exit-button.html',
              description: 'A scene with an in-world exit button.' },

            { title: 'Bounded Floor', category: 'Fried Chicken',
              path: 'show-boundary.html',
              description: 'A scene that shows the boundary.' },
          ];

          let mainElement = document.getElementById("main");

          // Append an element for every item in the pages list.
          for (var i = 0; i < pages.length; ++i) {
            var page = pages[i];

            let article = document.createElement('article');

            let title = document.createElement('h3');
            title.setAttribute('data-index', i + 1);

            let titleLink = document.createElement('a');
            titleLink.href = page.path;
            titleLink.textContent = page.title;
            title.appendChild(titleLink);
            article.appendChild(title);

            let category = document.createElement('h4');
            category.textContent = page.category;
            article.appendChild(category);

            let description = document.createElement('p');
            description.textContent = page.description;
            article.appendChild(description);

            let links = document.createElement('div');
            links.classList.add('links');

            let sourceLink = document.createElement('a');
            sourceLink.href = 'https://github.com/immersive-web/webxr-samples/blob/main/tests/' + page.path;
            sourceLink.textContent = 'Source';
            links.appendChild(sourceLink);

            if (!page.noPolyfill) {
              let polyfillLink = document.createElement('a');
              polyfillLink.href = page.path + '?usePolyfill=0';
              polyfillLink.textContent = 'Run Without Polyfill';
              links.appendChild(polyfillLink);
            }

            article.appendChild(links);

            mainElement.appendChild(article);
          }
        </script>
      </main>

      <br/>

      <h3><a class='github-link' href='https://github.com/immersive-web/webxr-samples'>View source on GitHub</a></h3>

      <footer class='footer'>
      </footer>
    </div>
  </body>
</html>
